<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/life_bg.png') +')'}">
			<view class="info">
				 <view class="name">无忧生活</view>
				 <view class="font-24 c-base">360°多维贴心服务，让您静享美好生活！</view>
			</view>
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="goBack()"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#ffffff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		<view class="module rel">
		  <view class="moduleItem flex-between" @click="goTo('/otherpages/life/service?type=1&title='+'保洁服务')">
			  <view class="">
			  	<view class="title">保洁服务</view>
			  	<view class="font-24 desc">专业清洁到家</view>
			  </view>
			  <image :src="$util.img('image/life_1.png')" mode="" class="img"></image>
		  </view>
		  <view class="moduleItem flex-between" @click="goTo('/otherpages/life/service?type=2&title='+'维修服务')">
			   <view class="">
				<view class="title">维修服务</view>
				<view class="font-24 desc">上门维修速办</view>
			   </view>
			   <image :src="$util.img('image/life_2.png')" mode="" class="img"></image>
		  </view>
		</view>
		
		<view class="detail rel">
		  <image :src="$util.img('image/life_title.png')" mode="heightFix" class="title"></image>
		</view>
		
		<view class="module rel" style="margin: 0rpx 24rpx 0;">
			<view class="moduleItem flex m-b-20" v-for="(item,index) in list" :key="index" @click="goDesc(item)">
			  <image :src="$util.img(item.icon)" mode="aspectFill" class="img" lazy-load></image>
			  <view class="">
				<view class="title">{{item.title}}</view>
				<view class="font-24 desc">{{item.sub_title}}</view>
			  </view>
			</view>
			<view class="moduleItem flex m-b-20" v-for="(item,index) in goodsCategory" :key="index" @click="goGoodsList(item)">
			  <image :src="$util.img(item.image)" mode="aspectFill" class="img" lazy-load></image>
			  <view class="">
			  	<view class="title">{{item.category_name}}</view>
			  	<view class="font-24 desc">{{item.description}}</view>
			  </view>
		  </view>
		</view>
		
		 <!-- 登录 -->
		 <login-pop ref="loginDialog"></login-pop>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				list: [],
				goodsCategory: [],
				appId: ''
			}
		},
		onLoad(data) {
			if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
			this.getIndex()
			this.getGoodsCategory()
			this.getNavigatorInfo()
		},
		methods: {
			goGoodsList(item) {
				this.$util.redirectTo('/otherpages/life/list?category_id='+item.category_id+'&category_name='+item.category_name)
			},
			getNavigatorInfo() {
			  this.$api.sendRequest({
				url: "/api/site/configUrl",
				data: {},
				success: res => {
				  if(res.code == 0) {
					this.appId = res.data.wuye_url_config.appId;
				  }
				}
			  })
			},
			goTo(url) {
				this.$util.redirectTo(url)
			},
			goDesc(item) {
				// wxaee3a6352d9f1b99
				// let skip_type = item.skip_type;  // 0 文章，1 跳转
				// let url = JSON.parse(item.url);
				// console.log(url)
				if(item.title == '物业服务') {
					uni.navigateToMiniProgram({
						appId: this.appId,
						path: '',
						success(res) {
							// 打开成功
						}
					})
				}else {
					this.$util.redirectTo('/otherpages/life/description?id='+item.article_id)
				}
			},
			getIndex() {
				this.$api.sendRequest({
			      url: "/api/life/servicelist",
			      data: {
			        page: 1,
					type: 0,
			      },
			      success: res => {
			        if(res.code == 0) {
						this.list = res.data.list;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			getGoodsCategory() {
				this.$api.sendRequest({
			      url: "/api/life/categorylists",
			      data: {
					type: 3
				  },
			      success: res => {
			        if(res.code == 0) {
						this.goodsCategory = res.data;
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	width: 750rpx;
	height: 726rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	.info {
		text-align: left;
		padding: 200rpx 30rpx 0 30rpx;
		.name {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
			color: #fff;
		}
	}
}

.module {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -430rpx 24rpx 70rpx;
  
  .moduleItem {
    width: 340rpx;
    // height: 145rpx;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
	background: #fff;
	border-radius: 20rpx;
    .title {
     font-family: "Alibaba PuHuiTi 2.0";
     font-weight: bold;
    }
    .desc {
      color: #788096;
      font-size: 24rpx;
    }
	.img {
		width: 106rpx;
		height: 106rpx;
		margin-right: 10rpx;
	}
  }
  
}

.detail {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24rpx 24rpx 24rpx;
  .title {
    width: 199rpx;
    height: 42rpx;
  }
}


</style>
